<div class='side-panel' id='favtagsPanel' hidden>
  <button type='button' data-action='toggle-sidepanel' data-target='favtags' data-purpose='hide' aria-label='{{ 'Close'|trans }}' title='{{ 'Close'|trans }}' class='btn float-right mr-2'><i class='fas fa-xmark fa-2x'></i></button>
  <div class='p-3'>
    <h3 class='mb-3'>{{ 'Favorite tags'|trans }}</h3>
    {% include 'filter-input-snippet.html' with {'target': 'favtagsTagsDiv', 'targetType': 'li'} %}
    <hr>
    <ul id='favtagsTagsDiv' class='list-group d-flex flex-column'>
      {% if favTagsArr|length == 0 %}
        <li class='list-group-item side-panel-item'>{{ 'No favorite tags are present. Add an existing tag with the form below.'|trans }}</li>
      {% else %}
        {% for favtag in favTagsArr %}
        <li data-action='add-tag-filter' data-tag='{{ favtag.tag|e('html_attr') }}' class='list-group-item side-panel-item {{ App.Request.query.all('tags')[0] == favtag.tag ? 'selected' : '' }}'>
          {{ favtag.tag }}<a href='#' class='float-right mr-2' data-id='{{ favtag.tags_id }}' data-action='destroy-favtags'><i class='fas fa-trash-alt'></i></a>
        </li>
        {% endfor %}
      {% endif %}
    </ul>
    <hr>
    {# ADD TAG AS FAVORITE INPUT #}
    <div class='input-group mt-2 mb-3'>
      <input id='createFavTagInput' data-autocomplete='tags' type='text' class='form-control form-inline' aria-label='{{ 'Add a tag as favorite'|trans }}' placeholder='{{ 'Add a tag as favorite'|trans }}'>
      <div class='input-group-append'>
        {# this is a dummy button with no action, all work is done via event listeners on #createFavTagInput #}
        <button class='btn btn-primary' type='button' title='{{ 'Add'|trans }}' aria-label='{{ 'Add'|trans }}'>
          <i class='fas fa-plus fa-fw'></i>
        </button>
      </div>
    </div>
  </div>
</div>
